<template>
  <div class="bigHigh_box">
    <div class="bigBox">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
        :size="formSize" status-icon>

        <!-- 客户名称 corpName -->
        <!-- 客户状态 corpState -->
        <!-- 客户星级 starRating -->
        <!-- 电子邮箱 cdetailNumber -->
        <!-- 客户类型 user_type -->
        <!-- 详细地址 address -->
        <!-- 部门职务 follow_up_status -->
        <!-- 跟进内容 last_follow_up_date -->
        <!-- 跟进人员 industry -->
        <!-- QQ号码 primary_contact -->
        <!-- 固定电话 birthday -->
        <!-- 联系人姓名 title -->
        <!-- 手机号码 phone_number -->
        <!-- 传真号码 opportunity_id -->
        <!-- 所在地址  previous_follower_id -->
        <!-- 上级客户  top_user -->
        <!-- 备注信息 Aka -->
        <!-- 微信账号 WechatPhone -->
        <!-- 所在地区 myPlace -->
        <!-- 企业规模 enterprise -->
        <!-- 角色 author -->
        <!-- 任务提醒 Task -->
        <!-- 创建下次跟进任务 create_next_task -->
        <!-- 邮件通知  Email_notifications -->
        <el-form-item label="客户名称" prop="corpName">
          <el-input v-model="ruleForm.corpName"  />
        </el-form-item>
        <el-form-item label="助记名称" prop="region">
          <!-- <el-select v-model="ruleForm.region" >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select> -->
          <el-input v-model="ruleForm.region" />
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <el-input v-model="ruleForm.suoshu" />
        </el-form-item>
        <el-form-item label="客户类型">
          <el-radio-group v-model="ruleForm.user_type" @change="change">
            <el-radio value="企业客户">企业客户</el-radio>
            <el-radio value="个人客户">个人客户</el-radio>
          </el-radio-group>

        </el-form-item>

        <el-form-item label="客户状态" prop="corpState">
          <!-- <el-select-v2 v-model="ruleForm.corpState" :options="options" /> -->
          <el-select v-model="ruleForm.corpState" placeholder="客户状态">
            <el-option label="正在跟进" value="正在跟进" />
            <el-option label="没有跟进" value="没有跟进" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户星级" prop="starRating">
          <el-rate v-model="ruleForm.aaa" allow-half />
        </el-form-item>
        <el-form-item label="客户来源" prop="count">
          <!-- <el-select-v2 v-model="ruleForm.count" :options="options" /> -->
          <el-select v-model="ruleForm.count" placeholder="客户来源">
            <el-option label="电话营销" value="正在跟进" />
            <el-option label="短信跟进" value="没有跟进" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属人员" prop="ascription">
          <el-input v-model="ruleForm.ascription" />
        </el-form-item>
        <el-form-item label="所在地区" prop="previous_follower_id">
          <el-input v-model="ruleForm.previous_follower_id" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm.address" />
        </el-form-item>
        <el-form-item label="企业规模" prop="enterprise">
          <!-- <el-select-v2 v-model="ruleForm.enterprise" :options="options" /> -->
          <el-select v-model="ruleForm.enterprise" placeholder="企业规模">
            <el-option label="微型企业" value="微型企业" />
            <el-option label="小型企业" value="小型企业" />
            <el-option label="中型企业" value="中型企业" />
            <el-option label="大型企业" value="大型企业" />
          </el-select>
        </el-form-item>
        <el-form-item label="上级客户" prop="top_user">
          <el-input v-model="ruleForm.top_user" />
        </el-form-item>
        <el-form-item label="备注信息" prop="Aka">
          <el-input v-model="ruleForm.Aka" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>

        <el-form-item label="注意" prop="create_next_task">
          <el-checkbox-group v-model="ruleForm.create_next_task">
            <el-checkbox value="Online activities" name="type">
              创建下次跟进任务
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="跟进时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date"
                style="width: 300px" />
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time"
                style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="跟进内容" prop="last_follow_up_date">
          <el-input v-model="ruleForm.last_follow_up_date" />
        </el-form-item>
        <el-form-item label="跟进人员" prop="industry">
          <el-input v-model="ruleForm.industry" />
        </el-form-item>
        <el-form-item label="任务提醒" prop="Task">
          <el-select v-model="ruleForm.Task" placeholder="任务提醒">
            <el-option label="准时提醒" value="准时提醒" />
            <el-option label="提前提醒" value="提前提醒" />
          </el-select>
        </el-form-item>

        <el-form-item label="注意" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox value="系统信息" name="type">
              系统信息
            </el-checkbox>
            <el-checkbox value="邮件通知" name="type">
              邮件通知
            </el-checkbox>
            <el-checkbox value="短信通知" name="type">
              短信通知
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="联系人姓名" prop="title">
          <el-input v-model="ruleForm.title" />
        </el-form-item>
        <el-form-item label="尊称" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio value="未知">未知</el-radio>
            <el-radio value="先生">先生</el-radio>
            <el-radio value="女士">女士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色" prop="author">
          <!-- <el-select-v2 v-model="ruleForm.author" :options="options" placeholder="选择角色" /> -->
          <el-select v-model="ruleForm.author" placeholder="甲方公司">
            <el-option label="甲方公司" value="甲方公司" />
            <el-option label="乙方公司" value="乙方公司" />
          </el-select>
        </el-form-item>
        <el-form-item label="生日" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker v-model="ruleForm.date2" type="date" label="Pick a date" placeholder="Pick a date"
                style="width: 400px" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="部门职务" prop="follow_up_status">
          <el-input v-model="ruleForm.follow_up_status" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone_number">
          <el-input v-model="ruleForm.phone_number" />
        </el-form-item>
        <el-form-item label="固定电话" prop="birthday">
          <el-input v-model="ruleForm.birthday" />
        </el-form-item>
        <el-form-item label="传真号码" prop="opportunity_id">
          <el-input v-model="ruleForm.opportunity_id" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="cdetailNumber">
          <el-input v-model="ruleForm.cdetailNumber" />
        </el-form-item>
        <el-form-item label="微信账号" prop="WechatPhone">
          <el-input v-model="ruleForm.WechatPhone" />
        </el-form-item>
        <el-form-item label="QQ号码" prop="primary_contact">
          <el-input v-model="ruleForm.primary_contact" />
        </el-form-item>
        <el-form-item label="所在地区" prop="myPlace">
          <el-input v-model="ruleForm.myPlace" />
        </el-form-item>
        <el-form-item label="详细地址" prop="name">
          <el-input v-model="ruleForm.native" />
        </el-form-item>
        <el-form-item label="备注信息" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
    </div>

    <div class="bot">
      <div class="mb-4">
        <el-button type="primary" class="bbb" @click="submitForm(ruleFormRef)">创建客户</el-button>
        <el-button type="primary" class="bbb" @click="resetForm1(ruleFormRef)">保存后继续创建</el-button>
        <el-button type="primary" class="bbb" @click="resetForm(ruleFormRef)" plain>重置</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useCounterStore } from '@/store/ticket'


const store = useCounterStore()


onMounted(() => {
  ruleForm.corpName = store.emitData.corpName || ''
  ruleForm.user_type = store.emitData.user_type || ''
  ruleForm.industry = store.emitData.primary_contact || ''
})

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  corpName: '',
  cdetailNumber: "",
  corpState: '',
  user_type: "",
  address: "",
  follow_up_status: "",
  last_follow_up_date: "",
  industry: "",
  primary_contact: "",
  birthday: "",
  title: "",
  phone_number: "",
  opportunity_id: "",
  previous_follower_id: "",
  top_user: "",
  Aka: "",
  WechatPhone: "",
  myPlace: "",
  enterprise: "",
  author: "",
  Task: "准时提醒",
  type: ['系统信息','邮件通知','短信通知'],
  // 分隔
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  resource: '未知',
  desc: '',
  suoshu: "",
  ascription: "",
  starRating: '',
  create_next_task: [],
  native: "",
  count:"",
  aaa:""
})

const change = (e: any) => {
  console.log(e, '2222');

}
const rules = reactive<FormRules<RuleForm>>({
  corpName: [
    {  required: true, message: '请输入你的名称', trigger: 'change' },
  ],
  // industry: [
  //   { required: true, message: '请输入你的名称', trigger: 'change' },
  // ],
  user_type: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],

  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: '请输入内容', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(ruleForm)
      store.getUpdateData(ruleForm)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const resetForm1 = async(formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `准时提醒`,
  label: `准时提醒`,
}))
</script>

<style scoped>
.bbb {
  height: 40px;
  padding: 15px;
}

.bot {
  width: 80%;
  height: 100px;
  /* background-color: aqua; */
  text-align: center;
  margin-top: 30px;
}

.bigBox {
  display: flex;
  justify-content: space-evenly;
}

.bigHigh_box {
  max-height: auto;
  overflow: scroll;
  display: flex;
  /* width: 1200px; */
  flex-direction: column;
  background-color: white;
  padding-top: 20px;
}
</style>